import { Link, FileAdded } from '@brillout/docpress'

Your <Link href="/config#files">`+` files</Link> should have only one export:

```js
// pages/index/+Page.js

// ✅ The main export
export { Page }

// ❌ Avoid such side exports
export { SomeComponent }
export { SomeOtherComponent }
```


### Why

The problem is that if often leads to client-side bloat, for example:

```js
// pages/about/+Page.js

// ❌ Bad: the /about page loads landing-page.css
import { SomeComponent } from '../index/+Page'
```
```js
// pages/index/+Page.js

import './landing-page.css'

export funtion SomeComponent() {
  // ...
}
```


### Solution

<FileAdded>
```js
// components/SomeComponent.js

export funtion SomeComponent() {
  // ...
}
```
</FileAdded>
```js
// pages/about/+Page.js

import { SomeComponent } from '../index/+Page' // [!code --]
import { SomeComponent } from '../../components/SomeComponent' // [!code ++]
```
```js
// pages/index/+Page.js

import './landing-page.css'
import { SomeComponent } from '../../components/SomeComponent' // [!code ++]

export funtion somecomponent() { // [!code --]
  // ... // [!code --]
} // [!code --]
```
